<template>
    <div>
        <table class="table table-hover" style="text-align: center; vertical-align: middle;">
            <thead>
                <tr>
                    <th>发票编号</th>
                    <th>购买方名称</th>
                    <th>价税合计</th>
                    <th>开票日期</th>
                    <th>上传日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="record in records" :key="record.id">
                    <td>{{ record.invoiceNum }}</td>
                    <td>{{ record.purchaserName }}</td>
                    <td>{{ record.amountInFiguers }}</td>
                    <td>{{ record.invoiceDate }}</td>
                    <td>{{ record.createtime }}</td>
                    <td>
                        <button type="button" class="btn btn-outline-secondary btn-sm" @click="clickToDetails(record)">查看详情</button>
                        <button type="button" class="btn btn-outline-danger btn-sm" style="margin-left: 10px;">废弃</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <nav aria-label="..." v-if="records.length != 0">
            <ul class="pagination" style="float: right;">
                <li class="page-item" @click="click_page(-2)">
                    <a class="page-link" href="#">前一页</a>
                </li>
                <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
                    <a class="page-link" href="#">{{ page.number }}</a>
                </li>
                <li class="page-item" @click="click_page(-1)">
                    <a class="page-link" href="#">后一页</a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script setup>
import $ from 'jquery';
import { useStore } from 'vuex';
import { ref } from 'vue';
import router from '@/router/index';

const store = useStore();
let records = ref([]);
let current_page = 1;
let total_records = 0;
let pages = ref([]);

const click_page = page => {
    if (page === -2) page = current_page - 1;
    else if (page === -1) page = current_page + 1;
    
    let max_pages = parseInt(Math.ceil(total_records / 10))
    if (page >= 1 && page <= max_pages) {
        pull_page(page);
    }
}

const update_pages = () => {
    let max_pages = parseInt(Math.ceil(total_records / 10))
    let new_pages = [];
    for (let i = current_page - 2; i <= current_page + 2; i ++) {
        if (i >= 1 && i <= max_pages) {
            new_pages.push({
                number: i,
                is_active: i === current_page ? "active" : "",
            });
        }
    }
    pages.value = new_pages;
}

const pull_page = page => {
    current_page = page;
    $.ajax({
        url: "http://localhost:3000/api/invoice/record",
        type: "get",
        data: {
            page,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            records.value = resp.records;
            total_records = resp.records_count;
            update_pages();
            store.commit("updateRecords", resp.records);
        },
        error(resp) {
            console.log(resp);
        }
    })
}

pull_page(current_page);

const clickToDetails = record => {
    router.push({
        name: "InvoiceDetails",
        params: {
            id: record.id
        },
    })
}

</script>

<style scoped>

</style>